<template>
<div>
  <el-steps :active="active" finish-status="success" align-center>
    <el-step title="创建项目"></el-step>
    <el-step title="上传数据"></el-step>
    <el-step title="分析数据"></el-step>
  </el-steps>
  <el-divider></el-divider>
  <el-skeleton :loading=loading :rows="10" animated />
  <div v-show="loading===false" style="display: flex;justify-content: center;flex-direction: column">
    <div v-show="active!==0">
      <el-card shadow="hover">
        <el-descriptions title="项目信息">
          <el-descriptions-item label="项目名">{{this.project.projectName}}</el-descriptions-item>
          <el-descriptions-item label="项目类型">信息熵计算</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{this.project.createTime}}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    <div v-show="active === 0 &&loading===false">
      <el-card shadow="hover">
        <el-form ref="projectFormRef" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="项目名" prop="projectName">
            <el-input v-model="form.projectName" placeholder="请输入项目名" />
          </el-form-item>
          <el-form-item label="项目类型" prop="projectType">
            <el-select v-model="form.projectType">
              <el-option  key="InformationEntropy" label="信息熵计算" value="InformationEntropy"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">创建项目</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div v-show="active === 1" style="width: 100%">
      <el-alert title="目前仅支持英文文本的信息熵计算" :closable="false" type="warning" show-icon style="margin: 10px"></el-alert>
      <el-form  ref="EntropyFormRef" :model="entropy" :rules="rulesEntropy"  label-width="80px">
        <el-form-item label="文本内容"  prop="entropyText">
          <el-input class="textarea"  :rows="14" type="textarea"  placeholder="请输入内容" v-model="entropy.entropyText"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="startAnalyze">开始分析</el-button>
          <el-button @click="resetForm1()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-show="active === 2 ||active === 3 "  style="width: 100%">
      <el-alert title="信息熵保留小数点后8位" :closable="false" type="warning" show-icon style="margin-bottom: 10px;margin-top: 10px"></el-alert>
      <el-card shadow="always">
        <el-row :gutter="20">
          <el-col :span="8">
            <div>
              <el-statistic group-separator=","
                  :precision="8"
                  :value="entropy.result"
                  title="信息熵">
                <template slot="prefix">
                  <i class="el-icon-s-data" style="color: blue"></i>
                </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-statistic :value="entropy.size"
                            title="文本长度"
                            group-separator=",">
                <template slot="suffix">
                  字符
                </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-statistic :value="entropy.time"
                            title="分析耗时"
                            group-separator=",">
                <template slot="prefix">
                  <i class="el-icon-time" style="color: blue"></i>
                </template>
                <template slot="suffix">
                  ms
                </template>
              </el-statistic>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div v-show="active === 2" style="width: 100%">
      <el-button v-waves plain type="primary" style="width:10%;float: left;margin-top: 20px" @click="pre" >上一步</el-button>
      <el-button v-waves type="success" style="width:10%;float: right;margin-top: 20px" @click="finish" >完成</el-button>
    </div>
    <div v-show="active === 3" style="width: 100%">
      <el-result icon="success" title="分析成功" subTitle="需要下载或预览源文件请点击下方按钮">
        <template slot="extra">
          <el-button type="primary"  plain  icon="el-icon-download" size="medium" @click="download">下载</el-button>
          <el-button type="info" plain icon="el-icon-files" size="medium" @click="preview">预览</el-button>
        </template>
      </el-result>
    </div>
  </div>
</div>
</template>

<script>
import {addProject, getProject} from "@/api/myProject";
import {analyze, finish, getInfo, pre} from "@/api/entropy";
import Waves from "@/directives/waves/waves";
export default {
  directives: { Waves },
  name: "InformationEntropy",
  data(){
    return{
      loading:false,
      id:this.$route.query.id,
      active: 0,
      form:{
        projectName:"",
        projectType:""
      },
      project:{},
      entropy:{
        id:'',
        entropyText:'',
        entropyStatus:'',
        result:'',
        size:'',
        time:''
      },
      ctbaProjectType:[],
    }
  },
  methods:{
    //提交表单
    submitForm(){
      this.$refs.projectFormRef.validate(valid => {
        if (valid) {
          addProject(this.form).then((res)=>{
            this.getProject(res.data)
            this.active=1
            this.$notify({
              title: 'EasyCTBA',
              message: '新建成功！',
              type: 'success',
              duration: '2000',
              offset: 100
            });
          })
        }
      })
    },
    //信息熵分析
    startAnalyze(){
      analyze(this.entropy).then(()=>{
         this.getEntropy();
      }).then(()=>{
        if (this.entropy.entropyStatus==="analyze"){
          this.active=2
        }
      });
    },
    //重置表单
    resetForm(){
      this.form={}
    },
    //重置表单
    resetForm1(){
      this.entropy.entropyText=''
    },
    //进度条下一步
    next() {
      // if (this.active++ > 2) {
      //   this.active = 0;
      // }
      this.active++;
    },
    //获取项目详情
    getProject(id){
      getProject(id).then((res)=>{
        this.project=res.data
        this.getEntropy() //同步执行
      });
      if (this.project==={}){
        this.$notify({
          title: 'EasyCTBA',
          message: '参数异常！',
          type: 'error',
          duration: '2000',
          offset: 100
        });
      }
    },
    //获取信息熵分析详情
    getEntropy(){
      getInfo(this.project.id).then(res=>{
        this.entropy=res.data
        if (this.entropy.entropyStatus==="upload"){
          this.active=1
        }else if (this.entropy.entropyStatus==="analyze"){
          this.active=2
        }else if (this.entropy.entropyStatus==="result"){
          this.active=3;
        }else {
          this.active=0
        }
      });
    },
    //完成分析
    finish(){
      finish(this.entropy.id);
      this.active=3
    },
    //上一步
    pre(){
      this.$confirm('此操作不会保存当前分析数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        pre(this.entropy.id).then(()=>{
          this.getEntropy()
        });
        this.active=1
      }).catch(() => {
        this.$notify({
          title: 'EasyCTBA',
          message: '取消上一步操作',
          type: 'warning',
          duration: '2000',
          offset: 100
        });
      });
    },
    //下载源文件
    download(){
      window.location.href = this.entropy.url;
    },
    //预览文件
    preview(){
      var url =  this.entropy.url; //要预览文件的访问地址
      // eslint-disable-next-line no-undef
      window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
    },

  },
  mounted() {
    const id=this.id
    if (id){
      this.loading=true
      getProject(id).then((res)=>{
        this.project=res.data
        this.getEntropy() //同步执行
        this.loading=false
      });
      if (this.project==={}){
        this.$notify({
          title: 'EasyCTBA',
          message: '参数异常！',
          type: 'error',
          duration: '2000',
          offset: 100
        });
      }
    }else {
      this.form.projectType="InformationEntropy"
    }
  },
  computed:{
    rules(){
      return{
        projectName: [
          { required: true, message: "项目名不能为空", trigger: "blur" }
        ],
        projectType: [
          { required: true, message: "项目类型不能为空", trigger: "change" }
        ],
      }
    },
    rulesEntropy(){
      return{
        entropyText: [
          { required: true, message: "分析文本不能为空", trigger: "blur" }
        ],
      }
    }
  }
}
</script>

<style scoped>
.textarea >>> .el-textarea__inner{
  font-family:"Microsoft",ui-serif !important;
  font-size:18px !important;
}
</style>